<template>
  <view class="page">
    <image v-if="detail.coverUrl" class="cover" :src="normalizedCoverUrl" mode="widthFix" />
    <view class="title">{{ detail.name }}</view>
    <view class="desc" v-if="detail.description">{{ detail.description }}</view>

    <!-- 图集 -->
    <swiper v-if="photoList && photoList.length" class="gallery" circular indicator-dots>
      <swiper-item v-for="(p,pi) in photoList" :key="pi">
        <image class="gallery-img" :src="normalizeImageUrl(p)" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 热度标签 -->
    <view v-if="detail.hotDegree" class="chips">
      <text class="chip hot">热度: {{ detail.hotDegree }}</text>
    </view>

    <!-- 关键信息 -->
    <view class="meta">
      <text v-if="detail.openTime">开放时间：{{ detail.openTime }}</text>
      <text v-if="detail.ticketPrice !== undefined">门票：¥{{ detail.ticketPrice }}</text>
      <text v-if="detail.ticketDesc">票务说明：{{ detail.ticketDesc }}</text>
      <text v-if="detail.latitude && detail.longitude">坐标：{{ detail.latitude }}, {{ detail.longitude }}</text>
      <text v-if="detail.altitude">海拔：{{ detail.altitude }}米</text>
    </view>

     <!-- 开放状态 -->
     <view class="block">
       <view class="block-title">开放状态</view>
       <view class="block-content">
         <text v-if="detail.status">状态：{{ detail.status === 1 ? '正常开放' : '暂停开放' }}</text>
       </view>
     </view>
    

    <!-- 详情富文本 -->
    <view class="content" v-if="detail.content" v-html="detail.content"></view>

    <!-- 底部导航栏 -->
    <custom-tabbar :active="0" @center-tap="onCenterTap" />
  </view>
  </template>

<script>
import config from '@/config'
import { getScenic } from '@/api/scenic'
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'

export default {
  components: { CustomTabbar },
  data() {
    return {
      id: '',
      detail: {}
    }
  },
  computed: {
    normalizedCoverUrl() {
      const raw = (this.detail && (this.detail.mainPhotoUrl || this.detail.coverUrl))
      if (!raw) return ''
      let url = String(raw)
      // 去掉开发工具的代理前缀
      url = url.replace('/__pageframe__', '')
      // 已是完整 http(s)
      if (/^https?:\/\//i.test(url)) return url
      // 以 / 开头，用 baseUrl 拼接主机
      if (url.startsWith('/')) {
        const base = (config && config.baseUrl) ? String(config.baseUrl).replace(/\/$/, '') : ''
        return base ? (base + url) : url
      }
      return url
    },
    // 处理图片列表
    photoList() {
      const urls = this.detail && this.detail.photoUrls
      if (!urls) return []
      return String(urls).split(',').filter(Boolean).map(s => s.trim())
    }
  },
  methods: {
    // 格式化图片地址
    normalizeImageUrl(url) {
      if (!url) return ''
      let imgUrl = String(url)
      imgUrl = imgUrl.replace('/__pageframe__', '')
      if (/^https?:\/\//i.test(imgUrl)) return imgUrl
      if (imgUrl.startsWith('/')) {
        const base = (config && config.baseUrl) ? String(config.baseUrl).replace(/\/$/, '') : ''
        return base ? (base + imgUrl) : imgUrl
      }
      return imgUrl
    },
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      try {
        const date = new Date(timeStr)
        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
      } catch (e) {
        return timeStr
      }
    },
    async fetchDetail() {
      try {
        const res = await getScenic(this.id)
        const data = res.data || res || {}
        // 直接使用后端字段，保持原始数据结构
        this.detail = data
      } catch (e) {
        this.detail = {}
      }
    },
    onCenterTap() {
      // 中间 AI 咨询
    }
  },
  onLoad(query) {
    this.id = (query && (query.id || query.scenicId)) || ''
    const coverFromQuery = query && (query.coverUrl ? decodeURIComponent(query.coverUrl) : (query.img ? decodeURIComponent(query.img) : ''))
    const title = query && query.title ? decodeURIComponent(query.title) : ''
    const content = query && query.content ? decodeURIComponent(query.content) : ''
    // 若直接传入标题/内容，则优先展示，不依赖后端
    if ((title || content) && !this.id) {
      this.detail = { name: title || '内容详细', coverUrl: coverFromQuery || '', description: content || '暂时无内容', content: content || '暂时无内容' }
      return
    }
    if (coverFromQuery && !this.id) {
      this.detail = { name: title || '景区预览', coverUrl: coverFromQuery, description: content || '暂时无内容', content: content || '暂时无内容' }
      return
    }
    if (this.id) this.fetchDetail()
  }
}
</script>

<style scoped>
.page { padding: 24rpx 24rpx 140rpx 24rpx; }
.cover { width: 100%; border-radius: 12rpx; }
.title { font-size: 32rpx; font-weight: 700; margin-top: 16rpx; }
.desc { color: #4b5563; font-size: 26rpx; margin-top: 8rpx; }
.gallery { margin-top: 12rpx; width: 100%; height: 320rpx; border-radius: 12rpx; overflow: hidden; }
.gallery-img { width: 100%; height: 100%; }
.gallery-desc { position: absolute; left: 0; right: 0; bottom: 0; padding: 8rpx 12rpx; font-size: 22rpx; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%); }
.chips { margin-top: 10rpx; display: flex; flex-wrap: wrap; gap: 8rpx; }
.chip { padding: 4rpx 10rpx; background: #f3f4f6; border-radius: 999rpx; font-size: 22rpx; color: #374151; }
.chip.hot { background: #f59e0b; color: #fff; }
.content { margin-top: 16rpx; font-size: 28rpx; color: #1f2937; }
.meta { margin-top: 20rpx; display: grid; row-gap: 6rpx; color: #374151; font-size: 24rpx; }
.block { margin-top: 16rpx; }
.block-title { font-size: 28rpx; font-weight: 700; color: #111827; }
.block-content { margin-top: 8rpx; font-size: 26rpx; color: #374151; line-height: 1.6; }
.list { margin-top: 8rpx; display: grid; row-gap: 10rpx; }
.item-title { font-size: 26rpx; font-weight: 600; color: #111827; }
.item-desc { font-size: 24rpx; color: #4b5563; }
</style>


